<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title> 

        <meta name="viewport" content="width=device-width, initial-scale=1"> 

        <link rel="stylesheet" href="{{asset('bundles/basejqueryui/plugins/mobile/jquery.mobile-1.1.0.min.css')}}" />
        <script src="{{ asset('bundles/basejqueryui/jquery-1.7.2.js') }}" ></script>
        <script src="{{asset('bundles/basejqueryui/plugins/mobile/jquery.mobile-1.1.0.min.js')}}"></script>
    </head> 

    <body> 

        <!-- Start of first page -->
        <div data-role="page" id="foo" >

            <div data-role="header">
                <h1>Foo</h1>
            </div><!-- /header -->

            <div data-role="content">	
                <p>I'm first in the source order so I'm shown as the page.</p>		
                <p>View internal page called <a href="#bar" data-transition="pop">bar</a></p>	
            </div><!-- /content -->

            <div data-role="footer">
                <h4>Page Footer</h4>
            </div><!-- /footer -->
        </div><!-- /page -->


        <!-- Start of second page -->
        <div data-role="page" id="bar" >

            <div data-role="header">
                <h1>Bar</h1>
            </div><!-- /header -->

            <div data-role="content">	
                <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</p>		
                <p><a href="#foo" data-transition="flip">Back to foo</a></p>	
                <p><a href="#dialog" data-rel="dialog">Open dialog</a></p>
            </div><!-- /content -->

            <div data-role="footer">
                <h4>Page Footer</h4>
            </div><!-- /footer -->
        </div><!-- /page -->
        
        <!-- Start of second page -->
        <div data-role="page" id="dialog" >

            <div data-role="header">
                <h1>Bar</h1>
            </div><!-- /header -->

            <div data-role="content">	
                <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</p>		
                <p><a href="#foo" data-transition="flip">Back to foo</a></p>	
                <p><a href="#dialog" data-rel="dialog">Open dialog</a></p>
            </div><!-- /content -->

            <div data-role="footer">
                <h4>Page Footer</h4>
            </div><!-- /footer -->
        </div><!-- /page -->
    </body>
</html>